<script setup>

import MyNav from "@/components/MyNav.vue";
import MyHead from "@/components/MyHead.vue";
import MyTable from "@/components/MyTable.vue";
import {onMounted, ref, shallowReactive, shallowRef} from "vue";
import {dateFormat, myPage, myRemove, myRemoveBatch} from "@/util";
import {pageApi, pageLikeTitleApi, removeApi, removeBatchApi} from "@/api/AssetsApi";
import MyPager from "@/components/MyPager.vue";
import MyList from "@/components/MyList.vue";
import {excelApi} from "@/api/axios";
import router from "@/router";
import {MINIO_HOST} from "@/const";
import MyUploader from "@/components/MyUploader";

// 表格数据
let records = ref();
// 分页数据
let pageInfo = shallowReactive({'pageNum': 1, 'pageSize': 5, 'fn': page});

/* ==================== 打印报表 ==================== */
function excel(record) {
  excelApi();
}

/* ==================== 分页查询 ==================== */
async function page(pageNum = pageInfo['pageNum'],
                    pageSize = pageInfo['pageSize']) {
  let config = {
    'api': pageApi,
    'params': {'pageNum': pageNum, 'pageSize': pageSize},
    'records': records,
    'pageInfo': pageInfo
  }

  //搜索资产名
  if(assetsTitle.value){
    config['params']['title'] = assetsTitle.value;
    config['api'] = pageLikeTitleApi;
  }

  //分页发送请求
  await myPage(config);
}

/* ==================== 单条添加 ==================== */
function insert() {
  router.push("/rms/AssetsInsert");
}

/* ==================== 单条修改 ==================== */
function update(record) {
  sessionStorage.setItem('assets', JSON.stringify(record));
  router.push("/rms/AssetsUpdate");
}

/* ==================== 单条删除 ==================== */
async function remove(record) {
  await myRemove({
    'id': record['id'],
    'api': removeApi,
    'fn': page
  });
}

/* ==================== 批量删除 ==================== */
let ids = shallowRef();

async function removeBatch() {
  await myRemoveBatch({
    'ids': ids.value,
    'api': removeBatchApi,
    'fn': page
  });
}
/* ==================== 上传头像 ==================== */
let uploadDrawer = shallowRef();
let uploadUrl = shallowRef();
// 当前操作记录的ID
let currentId;

// 上传头像：打开抽屉 > 发送请求
function upload(row) {
  uploadDrawer.value = true;
  currentId = row['id'];
  uploadUrl.value = 'http://localhost:8101/api/v1/assets/uploadPicture?id=' + row['id'];
}

// 上传成功：关闭抽屉 > 重新登录或重新分页
function uploadSuccess() {
  uploadDrawer.value = false;
  // 否则重新分页
  page();
}
/* ==================== 查看详情 ==================== */
const detailDrawer = shallowRef();
let detailItems = ref();
function detail(record) {
  detailItems.value = [
    {'label': '资产名称', 'value': record['title']},
    {

      'label': '资产图片', 'value': record['picture'], 'type': 'img',

      minio: url => MINIO_HOST + '/avatar/' + url

    },
   /* {'label': '资产图片', 'value': record['picture']},*/
    {'label': '资产单价', 'value': record['price']},
    {'label': '单价单位', 'value': record['priceUnit']},
    {'label': '剩余库存', 'value': record['stock']},
    {'label': '总计库存', 'value': record['total']},
    {'label': '库存单位', 'value': record['stockUnit']},
    {'label': '创建时间', 'value': record['created'], 'format': dateFormat},
    {'label': '修改时间', 'value': record['updated'], 'format': dateFormat},
    {'label': '资产描述', 'value': record['info'], 'type': 'card'},
  ];
  //打开抽屉
  detailDrawer.value = true;
}

/* ==================== 搜索资产名 ==================== */
let assetsTitle = shallowRef();
function pageByTitle(record) {
  assetsTitle.value = record;
  page();
}

/* ==================== 加载函数 ==================== */
onMounted(() => {
  page();
});

</script>

<template v-if="records">

  <my-nav :items="[
      {'icon': 'User', 'label': '资源管理'},
      {'icon': 'User', 'label': '资产列表'},
  ]"/>

  <my-head :items="[
    {'type': 'ipt', 'span': 5, 'placeholder': '资产名称', 'fn': pageByTitle},
    {'type': 'insertBtn', 'offset': 16, 'fn': insert},
    {'type': 'deleteBtn', 'fn': removeBatch},
    {'type': 'excelBtn', 'fn': () => excelApi('/assets/excel', '资产统计表.xlsx')},
  ]"/>

  <my-table v-if="records" :records="records" :columns="[
    {'column': '资产名称', 'property': 'title'},
    {'column': '资产图片', 'property': 'picture', 'type':'img',

      minio: url => MINIO_HOST + '/avatar/' + url},
   /* {'column': '资产图片', 'property': 'picture', 'type': 'image', 'minio': 'minio'},*/
    {'column': '资产单价', 'property': 'price', 'width': '100'},
    {'column': '单价单位', 'property': 'priceUnit', 'width': '100'},
    {'column': '剩余库存', 'property': 'stock', 'width': '100'},
    {'column': '总计库存', 'property': 'total', 'width': '100'},
    {'column': '库存单位', 'property': 'stockUnit', 'width': '100'},
    {'column': '资产描述', 'property': 'info', 'type': 'card'},
  ]" :buttons="[
    {'type': 'info', 'fn': detail},
    {'type': 'update', 'fn': update},
    {'type': 'delete', 'fn': remove},
    {'type': 'upload', 'btnLabel': '上传图片', 'fn': upload},
  ]" :selection-change="rows => ids = rows.map(e => e['id'])"/>

  <my-pager :page-info="pageInfo"/>

  <el-drawer v-model="detailDrawer" size="30%">
    <my-list title="记录详情" :items="detailItems"></my-list>
  </el-drawer>

  <el-drawer title="上传图片" v-model="uploadDrawer" size="30%">

    <my-uploader :action="uploadUrl" name="pictureFile" :fn="uploadSuccess"/>

  </el-drawer>

</template>

<style scoped lang="scss">

</style>